<template>
  <view class="orders-page">
    <view class="order" v-for="order in orders" :key="order.id">
      <view class="order-header">
        <text class="order-id">订单ID: {{ order.id }}</text>
        <text class="order-status" :class="getStatusClass(order.status)">
          {{ formatStatus(order.status) }}
        </text>
      </view>
      <view class="order-details">
        <text class="order-time">下单时间: {{ order.order_time }}</text>
        <text class="order-amount">金额: ¥{{ order.amount }}</text>
        <text class="order-video">视频ID: {{ order.video_id }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        {
          id: 1,
          order_time: "2022-09-05 14:23:00",
          user_id: 101,
          video_id: 201,
          amount: 49.99,
          status: "paid"
        },
        {
          id: 2,
          order_time: "2022-09-15 09:45:00",
          user_id: 102,
          video_id: 202,
          amount: 29.99,
          status: "pending"
        },
        {
          id: 3,
          order_time: "2022-09-20 18:30:00",
          user_id: 103,
          video_id: 203,
          amount: 19.99,
          status: "canceled"
        }
      ]
    };
  },
  methods: {
    // 格式化状态文本
    formatStatus(status) {
      switch (status) {
        case "paid":
          return "已支付";
        case "pending":
          return "待支付";
        case "canceled":
          return "已取消";
        default:
          return status;
      }
    },
    // 根据订单状态动态添加类名
    getStatusClass(status) {
      switch (status) {
        case "paid":
          return "status-paid";
        case "pending":
          return "status-pending";
        case "canceled":
          return "status-canceled";
        default:
          return "";
      }
    }
  }
};
</script>

<style scoped>
.orders-page {
  padding: 15px;
  background-color: #f4f4f4;
}

.order {
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.order-id {
  font-size: 14px;
  color: #333;
}

.order-status {
  font-size: 14px;
  font-weight: bold;
}

.status-paid {
  color: green;
}

.status-pending {
  color: orange;
}

.status-canceled {
  color: red;
}

.order-details {
  font-size: 12px;
  color: #666;
}

.order-time,
.order-amount,
.order-video {
  margin: 5px 0;
}
</style>
